<template>
  <div>
    <div v-show="curPageStatus === 1">
      <jxf-titletip :title="title" @refreshPage="refreshFuc" ></jxf-titletip>
      <el-card class="box-card mt20" v-show="curPageStatus === 1">
        <div class="text item">
          <el-form :model="searchInfo" ref="searchInfo" class="demo-form-inline" :inline="true">
            <el-form-item label="采购商企业名称:" prop="enterpriseName">
              <el-input v-model="searchInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="onSearch"></el-input>
            </el-form-item>
            <el-form-item label="出账状态：" prop="outState">
              <el-select v-model="searchInfo.outState" clearable placeholder="全部">
                <el-option label="已出账" value="1"></el-option>
                <el-option label="未出单" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账单时间：" prop="month">
              <el-date-picker
                v-model="searchInfo.month"
                type="month"
                placeholder="选择月"
                format="yyyy 年 MM 月"
                value-format="yyyyMM">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="违约状态：" prop="breakState">
              <el-select v-model="searchInfo.breakState" clearable placeholder="全部">
                <el-option label="未违约" value="0"></el-option>
                <el-option label="已违约" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="还款状态：" prop="repayState">
              <el-select v-model="searchInfo.repayState" clearable placeholder="全部">
                <el-option label="未还" value="1"></el-option>
                <el-option label="全额还" value="2"></el-option>
                <el-option label="部分还款" value="3"></el-option>
                <el-option label="驳回" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="jxf-table-card mt20" v-show="curPageStatus === 1">
        <div slot="header">
          <span>
            数据列表
          </span>
          <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
        </div>
        <jxf-table :table="dataTable">
          <template slot="breakState" slot-scope="scope">
            <div v-if="scope.row.breakState === 0">未违约</div>
            <div v-else class="c-red">已违约</div>
          </template>
          <template slot="repayState" slot-scope="scope">
            <div v-if="scope.row.repayState == 1">未还</div>
            <div v-if="scope.row.repayState == 2">全额还</div>
            <div v-if="scope.row.repayState == 3">部分还款</div>
            <div v-if="scope.row.repayState == 4">驳回</div>
          </template>
          <template slot="outState" slot-scope="scope">
            {{scope.row.outState === 1 ? "已出账":"未出单"}}
          </template>
          <template slot="credit" slot-scope="scope">
            {{scope.row.credit ? formatMoney.twoDecimal(scope.row.credit) : ""}}
          </template>
          <template slot="principal" slot-scope="scope">
            {{scope.row.principal ? formatMoney.twoDecimal(scope.row.principal) : ""}}
          </template>
          <template slot="shouldInterest" slot-scope="scope">
            {{scope.row.shouldInterest ? formatMoney.twoDecimal(scope.row.shouldInterest) : "0.00"}}
          </template>
          <template slot="repaymentTime" slot-scope="scope">
            {{scope.row.repaymentTime ? FormatDate.timeFormat(scope.row.repaymentTime) : ""}}
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="goToAccountDetail(scope.row)">账单明细</el-button>
            <el-button type="text" @click="goBillFlow(scope.row)">账单流水记录</el-button>
            <el-button type="text" @click="showBreakSms(scope.row)" v-if="scope.row.currentServicetTime > scope.row.repaymentTime && scope.row.breakState === 0 && (scope.row.repayState == 1 || scope.row.repayState == 3)">违约</el-button>
          </template>
        </jxf-table>
        <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                        @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      </el-card>
    </div>
    <Treaty :dataInfo="dataInfo" :isShowDetail.sync="isShowTreatyModel" @fresh="fresh"></Treaty>
    <AccountDetail v-if="curPageStatus === 2" :dataTable="accountData" :dataInfo.sync="billAccountDetail" @goBack="goBack" @goToAccountDetail="goToAccountDetail"></AccountDetail>
    <BillFlow v-if="curPageStatus === 3" :dataInfo="billData" @goBack="goBack"></BillFlow>
  </div>
</template>

<script>
  import AccountDetail from './components/AccountDetail'
  import BillFlow from './components/BillFlow'
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import Treaty from './components/Treaty'

  export default {
    name: "MerchantCreditBill",
    components: { BillFlow, AccountDetail, Treaty },
    data() {
      return {
        title: '采购商信用账单',
        searchInfo: {
          breakState: null,
          enterpriseName: "",
          merchantId: null,
          outState: null,
          repayState: null
        },
        payBillInfo: {},
        // 记录从付款方式弹框传出来的参数
        payInfo: {

        },
        isSuccess: false,
        billAccountDetail: {},
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        order: {},
        // 违约信息
        dataInfo: {},
        // 账单流水
        billData: {},
        // 判断哪个页面
        curPageStatus: 1,
        isShowPay: false,
        isShowPwd: false,
        dataTable: {
          border: true,
          loading: false,
          hasOperation: true,
          tr: [
            {
              id: '1',
              label: '账单号',
              prop: 'billNo',
              width: '210',
              fixed: "left"
            }, {
              id: '2',
              label: '企业名称',
              prop: 'enterpriseName'
            }, {
              id: '3',
              label: '发生月',
              width: '100',
              prop: 'month'
            }, {
              id: '4',
              label: '出账状态',
              show: 'template',
              prop: 'outState'
            }, {
              id: '5',
              label: '账单总额',
              show: 'template',
              prop: 'credit'
            }, {
              id: '6',
              label: '应还本金',
              show: 'template',
              prop: 'principal'
            }, {
              id: '7',
              label: '应还利息',
              show: 'template',
              prop: 'shouldInterest'
            }, {
              id: '8',
              width: '160',
              label: '最终还款日',
              show: 'template',
              prop: 'repaymentTime'
            }, {
              id: '9',
              label: '违约状态',
              show: 'template',
              prop: 'breakState'
            }, {
              id: '10',
              label: '还款状态',
              width: '100',
              show: 'template',
              prop: 'repayState'
            }, {
              id: '11',
              label: '操作',
              show: 'template',
              width: "180",
              fixed: "right",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        accountData:{},
        pageTotal: 0,
        pageSize: 10,
        currentPage: 1,
        // 是否显示违约弹框
        isShowTreatyModel: false
      }
    },
    methods: {
      goBack() {
        this.curPageStatus = 1
      },
      // 导出
      exportExcel() {
        this.isSuccess = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.export(apis.factory.exportMerchantBill, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },
      fresh() {
        this.getData()
      },
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.post(apis.factory.getMerchantBill, data).then(result => {
          if(result.code == "10000000") {
            this.dataTable.data = result.data.dataList;
            this.pageTotal = result.data.total;
          } else {
            this.$message.error(result.message)
          }
          this.dataTable.loading = false;
        })
      },
      // 违约操作
      showBreakSms(obj) {
        // 查看总经理的电话
        ajax.get(apis.finance.getGmTel).then(res => {
          if(res.code == "10000000") {
            this.dataInfo.id = obj.id;
            this.dataInfo.gmTel = res.data;
            this.dataInfo.accountName = obj.enterpriseName
            this.isShowTreatyModel = true;
          }
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
      // 进入账单流水
      goBillFlow(obj) {
        this.order = obj
        let data = {
          billId: obj.id,
        }
        this.billData = {
          recording: [
          ],
          data: {}
        };
        ajax.post(apis.factory.repayList, data).then(res => {
          if(res.code === "10000000") {
            this.billData.data = {
              billNo: res.data.billNo,
              createTime: res.data.createTime,
              credit: res.data.credit,
              enterpriseName: res.data.enterpriseName,
              principal: res.data.principal,
              billId: obj.id,
              shouldInterest: res.data.shouldInterest,
              penalty: res.data.penalty
            }
            for(let index = 0; index < res.data.repayTrades.length; index ++) {
              this.billData.recording.push({
                breakState: res.data.repayTrades[index].breakState,
                repayPenalty: res.data.repayTrades[index].repayPenalty,
                mouth: res.data.repayTrades[index].repayMonth,
                money: res.data.repayTrades[index].surplusPrincipal,
                rate: res.data.repayTrades[index].rate,
                applicableRatio: res.data.repayTrades[index].surplusInterest,
                repaymentMoney: res.data.repayTrades[index].rate,
                surplusTotal: res.data.repayTrades[index].surplusTotal,
                dataTable: {
                  border: true,
                  loading: false,
                  tr: res.data.repayTrades[index].breakState !== 1 ? [
                    {
                      id: '1',
                      label: '还款时间',
                      prop: 'repayTime',
                      show: 'template'
                    }, {
                      id: '2',
                      label: '还款金额',
                      show: 'template',
                      prop: 'repayCredit'
                    }, {
                      id: '3',
                      label: '还款本金',
                      show: 'template',
                      prop: 'repayPrincipal'
                    }, {
                      id: '4',
                      label: '还款利息',
                      show: 'template',
                      prop: 'repayInterest'
                    }
                  ] : [
                    {
                      id: '1',
                      label: '还款时间',
                      prop: 'repayTime',
                      show: 'template'
                    }, {
                      id: '2',
                      label: '还款金额',
                      show: 'template',
                      prop: 'repayCredit'
                    }, {
                      id: '3',
                      label: '还款本金',
                      show: 'template',
                      prop: 'repayPrincipal'
                    }, {
                      id: '4',
                      label: '还款利息',
                      show: 'template',
                      prop: 'repayInterest'
                    }, {
                      id: '5',
                      label: '还款违约金',
                      show: 'template',
                      prop: 'repayPenalty'
                    }
                  ],
                  data: res.data.repayTrades[index].details ? res.data.repayTrades[index].details : []
                },
              })
            }
            this.curPageStatus = 3;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 进入账单明细页面
      goToAccountDetail(obj) {
        this.billAccountDetail = {
          billId: obj.id
        }
        this.curPageStatus = 2;
      },
      // 刷新
      refreshFuc() {
        this.resetForm('searchInfo');
        this.onSearch()
      },
      goBack() {
        this.curPageStatus = 1;
      }
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style lang="scss">

</style>
